<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>问诊</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="css/ask.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/zepto.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="js/main.js"></script>
</head>
    <body>
    <div class="free-regist-all">
	    <div class="fr-re-it">
	    	<a href="">
	            <div class="fr-return"></div>
	        </a>
	        <span class="fr-login-l">免费问诊</span>
	    </div>	
		<div class="fr-in-top">
			<p class="in-top-t">温馨提示:</p>
			<p class="in-top-b">所有问题均由医生利用业余时间进行公益解答,如未能获得及时回复请耐心等待。</p>
		</div>
        <div class="fr-contain">
            <form action="" class="fr-form">
                <div class="fe-form-in">
                    <div class="form-in-fir">
                        <span class="free-p">性别:</span>
                        <div class="in-fir-r">
                            <input type="radio"  class="sex" id="fr-sex" name="sex"><label class="s-sex boy">男</label>
                            <input type="radio"  class="sex sex-r"  id="fr-sex"  name="sex"><label class="s-sex girl">女</label>
                        </div>
                    </div>
                    <div class="form-in-sec">
                        <span class="mona-p">年龄:</span>
                        <input type="number"  class="age">
                    </div>
                </div>
                <div class="fr-contain-b">
                    <div class="con-b-t">骨科</div>
                    <div class="con-b-con">
                        <div class="b-con-t">
                            <input type="text" placeholder="请输入您要咨询的主题">
                        </div>
                        <textarea name="" id="" cols="48" rows="5"  placeholder="请详细描述您的病情、症状、治疗经过以及想要获得的帮助"></textarea>
                    </div>
                </div>
                <div class="fr-bottom">
                    <div class="fr-bo-top">上传报告</div>
                    <div class="fr-bo-con">
                        <div class="bo-con-le">
                            <p>上传就诊病历/检查报告/病状报告</p>
                            <p>
                                <input type="checkbox" class="con-le-check">
                                <span>图片仅医生可见</span>
                            </p>
                        </div>
                        <div class="bo-con-ri">
                            <input type="file" id="freefile" class="fr-in_file">
                            <img class="fr-imgLogo" src="./images/tianjia.png">
                        </div>
                    </div>
                </div>
                <button type="submit" class="fr-bot-but">提交咨询</button>
            </form>
        </div>
    </div>
    <script>
    // doctor-free 页面上传图片
    // 点击头像传图片
         function fileToBase64(file, callback, outputFormat) {
            var file = file[0];
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    callback.call(this, evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            } 
            } 
            $("#freefile").on('change', function () {
                fileToBase64($(this), function (imgBase64) {
                    $('.fr-imgLogo').attr('src', imgBase64);
                });
            });

    </script>
    </body>
</html>